<template>
  <div class="person">
    <!-- 
      10 watchEffect

       官网：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。

      * `watch`对比`watchEffect`

        > 1. 都能监听响应式数据的变化，不同的是监听数据变化的方式不同
        >
        > 2. `watch`：要明确指出监视的数据
        >
        > 3. `watchEffect`：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。
    -->
    <h2>需求: 当水温达到60,或者水位达到80,提示</h2>
    <h2>当前水温为: {{ temp }}</h2>
    <h2>当前水位为: {{ height }}</h2>
    <button @click="changeTemp">水温加10</button>
    <button @click="changeHei">水位加10</button>
  </div>
</template> 

<script setup lang="ts" name="Pserson234">
import { ref, watch, watchEffect } from 'vue'

let temp = ref(10)
let height = ref(10)
let changeTemp = () => {
  temp.value +=10
}
let changeHei = () => {
  height.value +=10
}

// 如果要监听7个数据,得写7个数据，[]里面
// watch([temp,height], (newV, oldV) => {
//   let [newTemp, newHeight] = newV
//   if(newTemp >= 60 || newHeight>=80) {
//     alert('!!!')
//   }
// })

watchEffect(()=>{
  // 一开始就会执行一次回调
  if(temp.value >= 60 || height.value>=80) {
    alert('!!!')
  }
})



</script>
<style>
.person {
  background-color: blue;
  box-shadow: 0 0 10px;
  padding: 20px;
}
button {
  margin: 0 5px;

}
</style>